<template>
  <div class="mpd-wordspace-side-bar display-flex not-select" :class="sideBarClass">
    <div class="side-actions-container display-flex flex-direction-column">
      <div class="top flex-size-auto">
        <div
          class="side-actions-item"
          :class="[selectedItem === item.key ? 'selected' : null]"
          v-for="(item, index) in itemActions.top"
          :key="'side-actions-item-' + index"
          :title="item.title"
          @click="actionItemClickHandle(item, index)"
        >
          <div v-if="item.icon">
            <mpd-icon :icon="item.icon"></mpd-icon>
          </div>
          <div class="text-word-break-all">{{ item.title }}</div>
        </div>
      </div>
      <div class="bottom">
        <div
          class="side-actions-item"
          :class="[selectedItem === item.key ? 'selected' : null]"
          v-for="(item, index) in itemActions.bottom"
          :key="'side-actions-item-' + index"
          :title="item.title"
          @click="actionItemClickHandle(item, index)"
        >
          <div v-if="item.icon">
            <mpd-icon :icon="item.icon"></mpd-icon>
          </div>
          <div class="text-word-break-all">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <resize-container
      class="side-panel-container"
      :position="resizePosition"
      :dom-width="300"
      :min-width="200"
      :max-width="600"
      v-if="showComponent"
    >
      <component :is="showComponent" :actionItem="selectActionItem" v-bind="selectActionItem.attr"></component>
    </resize-container>
  </div>
</template>

<script>
import PanelStructure from './panel/PanelStructure'
import PanelComponentLibrary from './panel/PanelComponentLibrary'
import PanelBaseConfig from './panel/panel-base-config'
import PanelDynamicConfig from './panel/PanelDynamicConfig'
import PanelJsonShow from './panel/PanelJsonShow'

export default {
  components: {
    PanelStructure,
    PanelComponentLibrary,
    PanelBaseConfig,
    PanelDynamicConfig,
    PanelJsonShow
  },
  props: {
    // 方向，可选择左边还是右边
    direction: {
      type: String,
      validator(value) {
        return ['left', 'right'].includes(value)
      },
      default: 'left'
    },
    // 可点击操作的按钮
    itemActions: {
      type: Object
    },
    // 选中的item
    selectedItem: {
      type: String,
      default: ''
    }
  },
  inject: ['selectPageNodeDom'],
  computed: {
    // 侧边栏class
    sideBarClass() {
      let data = []
      data.push('flex-direction-row' + (this.isLeft() ? '' : '-reverse'))
      data.push(this.direction)
      return data
    },
    // resize方向
    resizePosition() {
      switch (this.direction) {
        case 'left':
          return ['right']
        case 'right':
          return ['left']
        default:
          return []
      }
    },
    // 展示的组件
    showComponent() {
      if (this.selectActionItem) {
        return this.selectActionItem.component
      } else {
        return null
      }
    },
    // 选中的item
    selectActionItem() {
      const actions = [...this.itemActions.top, ...this.itemActions.bottom]
      for (const index in actions) {
        if (actions[index].key === this.selectedItem) {
          return actions[index]
        }
      }
      return null
    }
  },
  watch: {
    'selectPageNodeDom.item.id': {
      handler() {
        if (!this.isLeft()) {
          this.$emit('update:selectedItem', this.itemActions.top[0].key)
        }
      }
    }
  },
  methods: {
    // 是否是左侧栏
    isLeft() {
      return 'left' === this.direction
    },
    // 处理点击操作按钮
    actionItemClickHandle(item) {
      if (this.selectedItem === item.key) {
        item = {}
      }
      this.$emit('update:selectedItem', item.key)
    }
  }
}
</script>

<style lang="less">
.mpd-wordspace-side-bar {
  color: var(--mpd-global-font-color);
  background-color: var(--mpd-content-side-bar-bg-color);
  font-size: var(--mpd-global-font-size);
  // 侧边栏操作按钮
  .side-actions-container {
    width: 50px;
    .side-actions-item {
      width: 100%;
      padding: 5px 0;
      text-align: center;
      cursor: pointer;
      border-left: 2px solid rgba(0, 0, 0, 0);
      border-right: 2px solid rgba(0, 0, 0, 0);
      span {
        font-size: 26px;
      }
    }

    .side-actions-item:hover,
    .side-actions-item.selected {
      color: var(--mpd-content-side-actions-item-font-hover-color);
    }
  }
  &.left .side-actions-container {
    .side-actions-item.selected {
      border-left-color: var(--mpd-content-side-actions-item-border-selected-color);
    }
  }
  &.right .side-actions-container {
    .side-actions-item.selected {
      border-right-color: var(--mpd-content-side-actions-item-border-selected-color);
    }
  }
  // 侧边栏面板区域
  .side-panel-container {
    background-color: var(--mpd-content-side-panel-bg-color);
  }
}
</style>
